<template>
  <div class="middle-panel">
    <TopPart 
      :pageConfig="pageConfig"
      @handleOpenRobotOnline="handleOpenRobotOnline"
    />
    <CenterPart 
      :pageConfig="pageConfig"
    />

    <BottomPart 
      :pageConfig="pageConfig"
      @handleOpenRobotDealNum="handleOpenRobotDealNum"
    />   
    <!-- 各省机器人上线情况 -->
    <RobotOnline
      ref="robotOnline"
      :pageConfig="pageConfig"
    />

    <!-- 处理单量及通过率 -->
    <RobotDealNum
      ref="robotDealNum"
      :pageConfig="pageConfig"
      @handleOpenRobotDealNum="handleOpenRobotDealNum"
    />

  </div>
</template>

<script>
  import TopPart from './TopPart.vue';
  import CenterPart from './CenterPart.vue';
  import BottomPart from './BottomPart.vue';
  import RobotOnline from '../DrillPages/RobotOnline.vue';
  import RobotDealNum from '../DrillPages/RobotDealNum.vue';

  export default {
    props: {
      pageConfig: Object
    },
    components: {
      TopPart,
      CenterPart,
      BottomPart,
      RobotOnline,
      RobotDealNum

    },
    data() {
      return {
        
      }
    },
    methods: {
      handleOpenRobotOnline(item) {
        this.$refs.robotOnline.handleOpen(item);
      },
      handleOpenRobotDealNum(name) {
        this.$refs.robotDealNum.handleOpen(name);
      }
    }

  }
</script>

<style lang="less" scoped>
.middle-panel {
  height: 100%;
}
  
</style>